<template>
  <view class="d-flex pt-4 pb-3 pl-2 bg-blue">
    <nut-avatar size="large" :icon="userInfo.avatar"></nut-avatar>
    <view class="fs-md ml-2 mt-1 text-white">{{ userInfo.name }}</view>
  </view>
  <view class="border"></view>
  <view class="mt-3 pl-3 fs-lg">我的任务</view>
  <view>
    <view class="ml-2" style="width:70%">
      <nut-cell
        :showIcon="true"
        title="选择日期"
        :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
        @click="openSwitch"
      >
      </nut-cell>
      <nut-calendar
        v-model:visible="isVisible"
        :default-value="date"
        type="range"
        :start-date="START_DATA"
        :end-date="null"
        @close="closeSwitch"
        @choose="setChooseValue"
      >
      </nut-calendar>
    </view>
  </view>
  <view class="d-flex flex-wrap fs-md  text-center">
    <view class="ml-2  px-2 pt-1  card-border">
      <view class="text-red">{{ total }}</view>
      <view>我的排班</view>
    </view>
    <view
      class="ml-2  px-2 pt-1  card-border"
      v-for="(item, index) in scheduleRoleList"
      :key="index"
    >
      <view class="text-blue">{{ item.orderNum }}</view>
      <view>{{ item.name }}</view>
    </view>
  </view>
  <view class="mx-2 pt-5">
    <nut-button type="danger" block class="fs-md " @click="logout" v-if="token"
      >退出登录</nut-button
    >
  </view>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, toRaw } from 'vue'
import Taro from '@tarojs/taro'
import { useStore } from '@/stores'
import dayjs from 'dayjs'
import constData from '@/config/const'
import { roleList } from '@/common/data'
import { getMonthStartDate } from '@/utils/dataUtil.js'
import { getOverviewEmployeeSchedule } from '@/services/apis/overview'

const auth = useStore('auth')
const userInfo = computed(() => auth.userInfo)
const token = Taro.getStorageSync('token')

onMounted(() => {
  fetchOverviewEmployeeSchedule()
})

const { START_DATA } = constData

const endDay = dayjs(Date.now() - 8.64e6).format('YYYY-MM-DD')
const startDay = getMonthStartDate()
console.log(startDay, 'startDay')

const date = ref([startDay, endDay])
let isVisible = ref(false)
let total = ref(0)
let scheduleRoleList = ref([])

let scheduleParams = {
  storeID: auth.storeId,
  beginTime: dayjs(startDay).unix(),
  endTime: dayjs(endDay).unix(),
  pageNo: 1,
  pageSize: 2,
  direction: 1
}

const openSwitch = () => {
  isVisible.value = true
}

const closeSwitch = () => {
  isVisible.value = true
}
const setChooseValue = param => {
  date.value = [...[param[0][3], param[1][3]]]
  // console.log(dayjs(toRaw(param[0][3])).unix())
  // console.log(dayjs(toRaw(param[1][3])).unix())
  scheduleParams.beginTime = dayjs(toRaw(param[0][3])).unix()
  scheduleParams.endTime = dayjs(toRaw(param[1][3])).unix()
  fetchOverviewEmployeeSchedule()
}

const logout = () => {
  Taro.removeStorageSync('token')
  auth.setUserInfo(null)
  Taro.navigateTo({ url: '/pages/login/index' })
}

const fetchOverviewEmployeeSchedule = async () => {
  const res = await getOverviewEmployeeSchedule(scheduleParams)
  scheduleRoleList.value = res.data.roleList.map(ele => {
    let data = roleList.find(element => {
      return element.id === ele.roleNo
    })
    return { ...ele, name: data!.name }
  })
  // console.log(scheduleRoleList.value, 'scheduleRoleList')
  total.value = res.data.total
}
</script>

<style lang="scss">
.card-border {
  border: 1px solid #ccc;
  margin-top: 10px;
  width: 165px;
  height: 70px;
  // &:hover {
  //   background: #f56723;
  // }
}
</style>
